<template>
  <div :id="props.id" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, onMounted, defineProps, watch } from "vue";
import * as echarts from "echarts";

let props = defineProps({
  id: {
    type: String,
    default: "",
  },
  data: {
    type: Object,
    default: () => {},
  },
});

var myChart;

let init = () => {
  if (myChart != null && myChart != "" && myChart != undefined) {
    // 3. 已存在则调用 dispose() 方法销毁
    myChart.dispose();
  }

  myChart = echarts.init(document.querySelector(`#${props.id}`));

  myChart.setOption(props.data);

  window.onresize = function () {
    myChart.resize();
  };
};

watch(
  props,
  (newV) => {
    setTimeout(() => {
      init();
    }, 200);
  },
  { immediate: true }
);
</script>

<style scoped></style>
